Guidelines for Customizing Style Sheets

This topic describes the guidelines for customizing style sheets.

Process Platform does not provide an interface to customize cascading style sheets. To edit them, you need to modify the classes of cascading style sheets.

GUIDELINES FOR CUSTOMIZING THE Process Platform INTERFACE

To customize the Process Platform interface, you need to edit default.css.
Ensure that you use the following guidelines while customizing the interface:

• Retain all class names in the order in which they appear. If required, modify only the class properties.
• Process Platform recommends that you do not modify xdefault.css. If required to do so, test the modifications in the customized and non-customized default.css style sheet to ensure that the modified xdefault.css works with other style sheets. The changes made to default.css are applicable to the entire Process Platform suite.

GUIDELINES FOR CUSTOMIZING THE XFORMS INTERFACE

You can use custom style sheets to modify the appearance of an XForm's interface. To do so, specify the URL of the style sheet in the Form - Properties window.
Ensure that you use the following guidelines while customizing the interface:

• Use default.css as a template, and retain all class names in the order in which they appear. If required, modify only the class properties.
• It is not mandatory to carry forward the positional properties of tabs from default.css.

GUIDELINES FOR CUSTOMIZING XFORMS ELEMENTS

You can use custom style sheets with custom class names to modify elements in an XForm.
Ensure that you use the following guidelines while using custom class names:

• Use default.css as a template.
• You need not carry forward the positional properties of tabs from default.css.
• Add the custom class name to the existing selectors.
  • To modify the appearance of primitive controls such as Input, Password, Output, and Textarea, the following custom selectors are needed:
    • .<custom> .input
    • .<custom> textarea
    • .<custom> .output
    • .<custom> .h_label
    • .<custom> .v_label
    • .<custom> .lookup
    • .<custom> .lookup .disabled, .<custom> .lookup .output
  • To modify the appearance of grouping controls such as the Groupbox control, the following custom selectors are needed:
    • .<custom> .groupheader
    • .<custom> .groupcontent
  • To modify the appearance of the Button and Frame controls, the following custom selectors are needed:
    • .<custom>.h_button
    • .<custom>.v_button
    • iframe.<custom>
      In the above class names, <custom> stands for the class that will be specified in the property sheet of the specific control.
      Notice the use of descendant selectors for classes of all controls, except the Textarea and Frame controls, which use the tag selector. A similar approach must be followed for other controls such as Check, Select, List, Tab Page, and Table. Also, notice the use of selector without spaces in case of the Buttons and Frame controls.
• Create the XForm and specify custom class names for the elements whose appearance needs to be customized.
• Add the custom style sheets to the XForm. The appearance of controls associated with custom classes should change.